<template>
    <div class="InteractionBox">
        <div class="Interaction">
            <img v-if="!is_favor" src="../assets/favor.png" alt="点赞" @click="changeFavor"> 
            <img v-if="is_favor" src="../assets/favored.png" alt="点赞" @click="changeFavor">
            <div class="InterNum">{{favor_num}}</div>
        </div>
        <div class="Interaction">
            <img src="../assets/comment.png" alt="评论"> 
            <div class="InterNum">{{comment_num}}</div>
        </div>
        <div class="Interaction">
            <img v-if="!is_collect" src="../assets/collect.png" alt="收藏" @click="changeCollect"> 
            <img v-if="is_collect" src="../assets/collected.png" alt="收藏" @click="changeCollect">
            <div class="InterNum">{{collect_num}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'InteractionBox',
    data(){
        return{
            is_favor: false,
            is_collect: false,
            favor_num: 0,
            comment_num: 0,
            collect_num: 0,
        }
    },
    props:['postId'],
    mounted(){
        console.log(this.postId)
        let userId = localStorage.getItem('userId')
        this.$axios({
            method:'get',
            url:`/api/praises/${userId}/${this.postId}`,
            headers:{
                'Content-Type':'application/json',
                'token':localStorage.getItem('token')
            }
        }).then(res=>{
            // console.log(res)
            if(res.data.data){
                if(res.data.code==1){
                    this.is_favor = true
                }else this.is_favor = false
            }else this.is_favor = false
        })
        this.$axios({
            method:'get',
            url:`/api/posts/findId/${this.postId}`,
            headers:{
                'Content-Type':'application/json',
                'token':localStorage.getItem('token')
            }
        }).then(res=>{
            console.log(res)
            this.favor_num = res.data.data.praiseNum
            this.comment_num = res.data.data.commentNum
            this.collect_num = res.data.data.collectNum
        })
        this.$axios({
            method:'get',
            url:`/api/collects/${userId}/${this.postId}`,
            headers:{
                'Content-Type':'application/json',
                'token':localStorage.getItem('token')
            }
        }).then(res=>{
            if(res.data.data){
                if(res.data.code==1){
                    this.is_collect = true
                }else this.is_collect = false
            }else this.is_collect = false
        })
    },
    methods:{
        changeFavor(){
            if(this.is_favor==true){
                this.$axios({
                    method:'delete',
                    url:`/api/praises/${localStorage.getItem('userId')}/${this.postId}`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    }
                }).then(res=>{
                    // console.log(res)
                    if(res.data.code==1){
                        this.is_favor=false
                        this.favor_num--;
                        this.$forceUpdate();
                    }
                })
            }else if(this.is_favor==false){
                this.$axios({
                    method:'post',
                    url:`/api/praises`,
                    data:{
                        userId:localStorage.getItem('userId'),
                        postId:this.postId
                    },
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    }
                }).then(res=>{
                    // console.log(res)
                    if(res.data.data){
                        if(res.data.code==1){
                            this.is_favor=true
                            this.favor_num++;
                            this.$forceUpdate();
                        }
                    }
                    
                })
                
            }
        },
        changeCollect(){
            if(this.is_collect==true){
                this.$axios({
                    method:'delete',
                    url:`/api/collects/${localStorage.getItem('userId')}/${this.postId}`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.code==1){
                        this.is_collect=false
                        this.collect_num--;
                        this.$forceUpdate();
                    }
                })
            }else if(this.is_collect==false){
                this.$axios({
                    method:'post',
                    url:`/api/collects`,
                    data:{
                        userId:localStorage.getItem('userId'),
                        postId:this.postId
                    },
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.data){
                        if(res.data.code==1){
                            this.is_collect=true
                            this.collect_num++;
                            this.$forceUpdate();
                        }
                    }
                    
                })
                
            }
        }
    }
}
</script>

<style scoped>
    .InteractionBox{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .Interaction{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .Interaction:hover{
        cursor: pointer;
    }
    .Interaction img{
        width: 12%;
        height: 12%;
    }
    .InterNum{
        margin-left: 2.5%;
        font-size: 0.95em;
        color: #fff;
    }
</style>